<template>
    <div>
        <input
            class="form-control"
            :class="{ 'is-invalid': !isValid }"
            :value="value"
            @input="handleInput"
            v-bind="$attrs"
        />
        <p v-if="!isValid" class="invalid-feedback mt-2">
            {{ $parent.errorMessage }}
        </p>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
    props: {
        value: String,
    },
    data() {
        return {
            isValid: true,
        };
    },
    methods: {
        handleInput(event) {
            // 为了实现 v-model
            this.$emit('input', event.target.value);
            // 校验表单
            this.$parent.$emit('validate-input', event.target.value);
        },
    },
};
</script>
